<template>
  <div>
    <el-card class="box-card card">
      <span class="title">用户信息</span>
    </el-card>
    <el-card class="box-card card">
      <el-descriptions class="des" :column="3" size="medium" border>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            用户名
          </template>
          {{ user.name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            手机号
          </template>
          {{ user.phone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            居住地
          </template>
          {{ user.city }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-male"></i> /
            <i class="el-icon-female"></i>
            性别
          </template>
          {{ user.sex === 1 ? '男' : '女' }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-message"></i>
            角色
          </template>
          系统管理员
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-message"></i>
            所属养老院
          </template>
          {{ user.careHomeName }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Mine",
  data() {
    return {
      user: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {}
    }
  },
  mounted() {
    console.log(this.user)
  }
}
</script>

<style scoped>
>>> .el-card {
  background-color: var(--lightBg);
  border: var(--inputBorder);
  color: var(--deepText);
  margin-bottom: 20px;
}

>>> .el-card__header {
  border-color: var(--deepText);
}

.box-card:hover {
  background-color: var(--hover);
}

.card {
  background-color: var(--lightBg);
  border: 1px solid var(--inputBorder);
  color: var(--deepText);
  display: flex;
  flex-direction: column;
}

.title {
  font-size: 25px;
}

>>> .el-descriptions__body {
  background-color: var(--deepBg);
  color: var(--deepText)
}

>>> .el-descriptions-item__label.is-bordered-label {
  background-color: var(--leftSe);
  color: var(--lightText);
}

</style>